import React, { Component } from 'react'

class AddStudent extends Component {

  constructor() {
    super()
    this.handler = this.handler.bind(this)
  }

  state = {
    number: '',
    name: '',
    sex: '女',
    age: 12,
    collage: '大前端',
    hobbies: [
      {
        id: 1,
        title: '篮球',
        isChecked: true
      },{
        id: 2,
        title: '足球',
        isChecked: true
      },{
        id: 3,
        title: '橄榄球',
        isChecked: true
      },
    ]
  }

  orgin = JSON.parse(JSON.stringify(this.state))

  hobbyHandler = (index, e) => {
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = e.target.checked
    this.setState({hobbies})
  }

  handler = (e) => {
    let value = e.target.value
    const prop = e.target.name
    console.log(value, prop)
    this.setState({
      [prop]: value
    })
  }

  handleSubmit = (ev) => {
    ev.preventDefault()
    let hobbies = this.state.hobbies.filter(hobby => hobby.isChecked).map(hobby => hobby.title)
    let formValue = {...this.state, hobbies}
    // 将当前数据利用回调的方式传回给上层组件
    this.props.addList(formValue, () => {
      this.setState(this.orgin)
    })
    // 提交操作完成之后,再将之前的state再次设置为最初的状态
    
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div className="form-group">
            <label>学号</label>
            <input name='number' className="form-control" onChange={this.handler} value={this.state.number} placeholder="请输入学生学号" />
          </div>
          <div className="form-group">
            <label>姓名</label>
            <input name='name' className="form-control" onChange={this.handler} value={this.state.name} placeholder="请输入学生姓名"/>
          </div>
          <div className="form-group">
            <label>性别</label>
            <div className='radio'>
              <label>
                <input type="radio" name="sex" checked={this.state.sex === '男' ? true : false} value='男' onChange={this.handler} />
                男
              </label>
              <label>
                <input type="radio" name="sex" checked={this.state.sex === '女' ? true : false} value='女' onChange={this.handler}/>
                女
              </label>
            </div>
          </div>
          <div className="form-group">
            <label>年龄</label>
            <input name='age' className="form-control" onChange={this.handler} value={this.state.age} />
          </div>
          <div className="form-group">
            <label>入学时间</label>
            <input type="datetime-local" className="form-control"  />
          </div>
          <div className="form-group">
            <label>爱好</label>
            {
              this.state.hobbies.map((hobby, index) => {
                return (
                  <div className="checkbox" key={hobby.id}>
                  <label>
                    <input type="checkbox" value={hobby.title} onChange={this.hobbyHandler.bind(this, index)} checked={hobby.isChecked}/>
                    {hobby.title}
                  </label>
                </div>
                )
              })
            }
          </div>
          <div className="form-group">
            <label>所属学院</label>
            <select className="form-control" name='collage' onChange={this.handler}>
              <option checked={this.state.collage === '大前端' ? true : false}>大前端</option>
              <option checked={this.state.collage === 'python' ? true : false}>python</option>
              <option checked={this.state.collage === 'Java' ? true : false}>Java</option>
            </select>
          </div>
          <input class="btn btn-default" type="submit" value="添加"></input>
        </form>
      </div>
    );
  }
}

export default AddStudent;
